<template>
    <div ref="container"></div>
</template>
<script>
import { Graph, Shape } from '@antv/x6'
import { defineComponent, onMounted, ref } from 'vue'



export default defineComponent({
    setup() {
        Graph.registerNode(
            'activityf',
            {
                inherit: 'rect',
                markup: [
                    {
                        tagName: 'image',
                        selector: 'img',
                    },
                ],
                attrs: {
                    img: {
                        x: 6,
                        y: 6,
                        width: 60,
                        height: 60,
                        'xlink:href': require('../assets/imgs/logo.png'),
                    },
                },
                //加这个位置
                // tools: [
                //     {
                //         name: 'tooltip',
                //         args: {
                //         },
                //     },
                // ],
            },
            true,
        )
        Graph.registerNode(
            'activity',
            {
                inherit: 'rect',
                markup: [
                    {
                        tagName: 'image',
                        selector: 'img',
                    },
                ],
                attrs: {
                    img: {
                        x: 6,
                        y: 6,
                        width: 60,
                        height: 60,
                        'xlink:href': require('../assets/imgs/log.png'),
                    },
                },
                //加这个位置
                // tools: [
                //     {
                //         name: 'tooltip',
                //         args: {
                //         },
                //     },
                // ],
            },
            true,
        )
        const container = ref(null)
        let graph = null
        onMounted(() => {
            graph = new Graph({
                container: container.value,
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight,
                interacting: function (cellView) {
                    return { nodeMovable: false }
                },
            })
            graph.on('cell:click', ({ e, x, y, cell, view }) => {
                console.log("111111111111", e);
                console.log("222222222222", x);
                console.log("333333333333", y);
                console.log("444444444444", cell);
                console.log("555555555555", view);
            })


            var data = {
                list1: [{ name: "小丽", age: 18 }, { name: "小美", age: 18 }],
                list2: [{ name: "小A", age: 18 }, { name: "小B", age: 18 }]
            };
            let dataList = [];
            let indexId = 0;
            for (let index = 0; index < data.list1.length; index++) {
                indexId++;
                dataList.push({
                    "id": data.list1[index].name,
                    "shape": "activity",
                    "width": 80,
                    "height": 80,
                    "label": data.list1[index].name,
                    "position": {
                        "x": 842 + index * 68,
                        "y": 40
                    },
                    "data": {
                        "disableMove": false,//true为可拖拽，false不可拖拽
                    },
                    "name": data.list1[index].name,
                    "age": data.list1[index].age
                })
            };
            for (let index = 0; index < data.list2.length; index++) {
                indexId++;
                dataList.push({
                    "id": data.list2[index].name,
                    "shape": "activityf",
                    "width": 80,
                    "height": 80,
                    "label": data.list2[index].name,
                    "position": {
                        "x": 555 + index * 68,
                        "y": 500
                    },
                    "data": {
                        "disableMove": false,//true为可拖拽，false不可拖拽
                    },
                    "name": data.list2[index].name,
                    "age": data.list2[index].age
                })
            };
            graph.fromJSON(dataList);            
        })
        return {
            container
        }
    }
})
</script>
<style scoped>
.custom-html{
    background-image: url('../assets/imgs/log.png');
    width: 100px;
    height: 100px;
    background-color: brown;
}
</style>